<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple bg-left">
          <p class="title">每日打卡</p>
          <div class="xinxi">
            <div class="tou"></div>
            <div class="yonghu">
              <p class="yong">用户名: 木子李</p>
              <br />
              <p class="zhi">职位: 绘世界HSJ后台管理员</p>
            </div>
          </div>
          <div class="buttom">
            <div class="da-ka">打卡</div>
            <div class="bu-ka">补卡</div>
          </div>
          <div class="da-ji">
            <div class="shiji">
              <h5>打卡记录</h5>
              <div>2021/12/16 <span>﹀</span></div>
            </div>
            <div class="yi-ka">
              <div class="sban">
                <div class="lan"></div>
                <span class="shi-jian">上班时间: 9:00</span>
              </div>
              <div class="yi-da-ka">
                打卡时间: <span style="color: #446ce3">8:52</span>
              </div>
              <span class="yi-da">已打卡</span>
            </div>
            <div class="yi-ka">
              <div class="chiban">
                <div class="hong"></div>
                <span class="xia">上班时间: 17:00</span>
              </div>
              <div class="wei-da">打卡时间:</div>
              <span class="span">未打卡</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="grid-content bg-purple bg-moddel">
          <p class="title">请假申请</p>
          <div class="main-zhu">
            <div class="main-left">
              <p class="title-left">标题</p>
              <div class="demo-input-size">
                <el-input v-model="input1" size="mini" />
              </div>
              <p class="qing-jia">请假时间</p>
              <div class="demo-date-picker">
                <div class="block">
                  <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="2021/1/22"
                    end-placeholder="2021/2/6"
                  >
                  </el-date-picker>
                </div>
              </div>
              <div class="left-bottom">
                <div class="bottom-left">
                  <div class="img">
                    <img src="../../../assets/img/圆.png" alt="" />
                  </div>
                  <p class="p">申请人</p>
                  <el-input v-model="input" placeholder="请输入" />
                </div>
                <div class="bottom-right">
                  <div class="img">
                    <img src="../../../assets/img/圆.png" alt="" />
                  </div>
                  <p class="p">审核人</p>
                  <el-select v-model="value" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </div>
            <div class="main-right">
              <p class="title-right">请假理由</p>
              <textarea
                name=""
                id=""
                cols="50"
                rows="10"
                style="background: #e9e9e9; width: 95%"
                placeholder="请输入文字"
              ></textarea>
              <p class="title-right" style="margin-top: 10px">上传图片</p>
              <div class="wen-jian">
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                >
                  <el-icon><plus /></el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="" />
                </el-dialog>
              </div>
              <div class="ti-jiao">提交申请</div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="grid-content bg-purple bg-right">
          <p class="title">快速浏览</p>
          <div class="kuai">
            <div class="ying">
              <p class="pp">应到天数</p>
              <p class="tian">12天</p>
            </div>
            <div class="chu">
              <p class="pp">出勤天数</p>
              <p class="tian">12天</p>
            </div>
            <div class="que">
              <p class="pp">缺卡次数</p>
              <p class="tian">0次</p>
            </div>
            <div class="jia">
              <p class="pp">加班时长</p>
              <p class="tian">4小时</p>
            </div>
          </div>
          <p
            style="
              color: #446ce3;
              text-align: right;
              margin-top: 10px;
              font-size: 16px;
              width: 100%;
              margin-left: -10px;
            "
          >
            查看详情
          </p>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple bg-bottom-left">
          <p
            style="
              width: 100%;
              height: 32px;
              font-size: 14px;
              font-weight: 600;
              padding: 10px;
              border-bottom: 1px solid #e9e9e9;
            "
          >
            每日资讯
            <span
              style="
                display: inline-block;
                background: #ff0000;
                width: 32px;
                height: 16px;
                color: #fff;
                font-size: 10px;
                text-align: center;
                border-radius: 20px;
              "
              >New</span
            >
          </p>
          <ul class="mei-zi">
            <li
              v-for="(item, index) in list"
              :key="index"
              class="meir"
              :class="{ back: index % 2 === 1 }"
            >
              <div class="imgurl">
                <img src="../../../assets/img/喇叭.png" alt="" />
              </div>
              <p class="hui">{{ item.title }}</p>
              <span class="hui-shi">{{ item.tiem }}</span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple bg-bottom-moddel">
          <el-calendar v-model="valuer" />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple bg-bottom-right">
          <p class="wo-de">
            <span>我的日志</span><span style="color: #446ce3">全部日志</span>
          </p>
          <div v-for="index of 2" :key="index" class="zhi">
            <div class="zhi-img">
              <img src="../../../assets/img/开会.png" alt="" />
            </div>
            <div>
              <p
                style="
                  width: 138px;
                  height: 13px;
                  font-size: 13px;
                  font-family: Arial;
                  font-weight: 400;
                  color: #446ce3;
                "
              >
                12-6至12-12日工作总结
              </p>
              <div class="wen">
                本周一于下午三点进行了本周第一次全体线上会议,会议起初由销售部门MIYA进行发言，会议起初由销售部门MIYA进行发就
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from "vue";
import { Plus } from "@element-plus/icons-vue";
export default defineComponent({
  setup() {
    const input1 = ref("");
    const input = ref("");
    const textarea2 = ref("");
    const valuer = ref(new Date());
    const input7 = ref("");
    const options = ref([
      {
        value: "谢涛",
        label: "谢涛",
      },
      {
        value: "黄泽群",
        label: "黄泽群",
      },
      {
        value: "Option3",
        label: "Option3",
      },
      {
        value: "Option4",
        label: "Option4",
      },
    ]);
    const value = ref("");
    const list = ref([
      {
        title: "绘世界2022春节放假安排放假放假",
        tiem: "12/16",
      },
      {
        title: "绘世界2022春节放假安排放假放假",
        tiem: "12/16",
      },
      {
        title: "绘世界2022春节放假安排放假放假",
        tiem: "12/16",
      },
      {
        title: "绘世界2022春节放假安排放假放假",
        tiem: "12/16",
      },
      {
        title: "绘世界2022春节放假安排放假放假",
        tiem: "12/16",
      },
      {
        title: "绘世界2022春节放假安排放假放假",
        tiem: "12/16",
      },
    ]);
    const state = reactive({
      shortcuts: [
        {
          text: "Last week",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            return [start, end];
          },
        },
        {
          text: "Last month",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            return [start, end];
          },
        },
        {
          text: "Last 3 months",
          value: () => {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            return [start, end];
          },
        },
      ],
      value1: "",
      value2: "",
    });
    return {
      input1,
      ...toRefs(state),
      input,
      options,
      value,
      textarea2,
      input7,
      list,
      valuer,
    };
  },
  components: {
    Plus,
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  methods: {
    handleRemove(file: any, fileList: any) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file: any) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
});
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-left {
  width: 100%;
  height: 390px;
  background: #ffffff;
  box-shadow: 0px 0px 3px 5px rgba(153, 153, 153, 0.09);
  padding-left: 8px;
  padding-right: 8px;
  .title {
    width: 100%;
    height: 32px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 550;
    color: #333333;
    line-height: 32px;
    padding-left: 10px;
    border-bottom: 1px solid #e9e9e9;
  }
  .xinxi {
    width: 100%;
    height: 100px;
    background: #dae2f9;
    border-radius: 3px;
    margin-top: 5px;
    margin-bottom: 5px;

    position: relative;
    .tou {
      width: 25%;
      height: 80px;
      background: #ffffff;
      border-radius: 50%;
      position: absolute;
      left: 10px;
      top: 10px;
    }
    .yonghu {
      position: absolute;
      left: 33%;
      top: 20px;
      .yong {
        width: 75%;
        height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
      }
      .zhi {
        width: 100%;
        height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 32px;
      }
    }
  }
  .buttom {
    width: 80%;
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 30px;
    .da-ka {
      width: 40%;
      height: 32px;
      background: #446ce3;
      border-radius: 16px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    .bu-ka {
      width: 40%;
      height: 32px;
      border: 1px solid #446ce3;
      border-radius: 16px;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
    }
  }
  .da-ji {
    width: 100%;
    height: 180px;
    border-top: 1px solid #e9e9e9;
    margin-top: 20px;
    padding-left: 10px;
    position: relative;
    .shiji {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h5 {
        font-size: 14px;
        font-weight: 500;
      }
    }
    .yi-ka {
      height: 70px;
      padding-right: 10px;
      .sban {
        width: 100%;
        height: 35px;
        background: #e9e9e9;
        border-radius: 3px;
        .lan {
          width: 8px;
          height: 8px;
          background: #366deb;
          position: absolute;
          left: 20px;
          top: 55px;
        }
        .shi-jian {
          position: absolute;
          left: 40px;
          top: 52px;
          width: 90px;
          height: 13px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
      .yi-da-ka {
        position: absolute;
        left: 40px;
        top: 75px;
        width: 90px;
        height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 32px;
      }
      .yi-da {
        position: absolute;
        right: 5%;
        top: 48%;
        color: #446ce3;
      }
      .chiban {
        width: 100%;
        height: 35px;
        background: #e9e9e9;
        border-radius: 3px;
        position: relative;
        .hong {
          width: 8px;
          height: 8px;
          background: crimson;
          position: absolute;
          left: 10px;
          top: 15px;
        }
        .xia {
          position: absolute;
          left: 30px;
          top: 12px;
          height: 13px;
          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #666666;
        }
      }
      .wei-da {
        position: absolute;
        top: 160px;
        left: 40px;
        width: 57px;
        height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }
      .span {
        position: absolute;
        top: 90%;
        right: 5%;
        color: #ff0000;
        font-size: 12px;
      }
    }
  }
}
.bg-moddel {
  width: 100%;
  height: 390px;
  background: #ffffff;
  box-shadow: 0px 0px 3px 5px rgba(153, 153, 153, 0.09);
  border-radius: 3px;
  .title {
    width: 100%;
    height: 32px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 550;
    color: #333333;
    line-height: 32px;
    padding-left: 10px;
    border-bottom: 1px solid #e9e9e9;
  }
  .main-zhu {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    .main-left {
      width: 100%;
      height: 353px;
      .title-left {
        width: 100%;
        height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
        margin-left: 20px;
        margin-bottom: 5px;
      }
      /deep/ .el-input__inner {
        padding: 0;
        margin-left: 15px;
        width: 80%;
        background: #e9e9e9;
        margin-bottom: 10px;
      }
      .qing-jia {
        width: 100%;
        height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
        margin-left: 20px;
        margin-bottom: 5px;
      }
      /deep/ .el-range-input {
        background: #e9e9e9;
      }
      /deep/ .el-range-separator {
        background: #ffffff;
      }
      .left-bottom {
        width: 40%;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: absolute;
        left: 8%;
        bottom: 60px;
        .bottom-left {
          width: 100%;
          height: 120px;
          position: relative;
          .p {
            width: 100%;
            height: 14px;
            line-height: 20px;
            margin-left: 12px;
          }
          /deep/ .el-input__inner {
            position: absolute;
            top: 0;
            left: -40px;
            width: 138px;
            height: 35px;
            text-align: center;
          }
        }
        .bottom-right {
          width: 100%;
          height: 120px;
          position: relative;
          .p {
            width: 100%;
            height: 14px;
            line-height: 20px;
            margin-left: 12px;
          }
          /deep/ .el-input__inner {
            position: absolute;
            top: 0;
            left: -40px;
            width: 138px;
            height: 35px;
            text-align: center;
          }
          /deep/ .el-input__suffix {
            display: none;
          }
          /deep/ .el-upload .el-upload--picture-card {
            width: 40%;
          }
        }
      }
    }
    .main-right {
      width: 100%;
      height: 353px;
      .title-right {
        width: 100%;
        height: 13px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
        margin-left: 20px;
        margin-bottom: 5px;
      }
      .wen-jian {
        // width: 220px;
        // height: 100px;
        // background: #e9e9e9;
        position: relative;
        /deep/ .avatar-uploader {
          position: absolute;
          top: 40px;
          left: 100px;
        }
      }
      /deep/ .el-upload .el-upload--picture-card {
        width: 40%;
      }
      .ti-jiao {
        width: 15%;
        height: 32px;
        background: #446ce3;
        border-radius: 16px;
        text-align: center;
        line-height: 32px;
        color: #ffffff;
        font-size: 14px;
        position: absolute;
        top: 80%;
        right: 4%;
      }
    }
  }
}
.bg-right {
  width: 100%;
  height: 390px;
  background: #ffffff;
  box-shadow: 0px 0px 3px 5px rgba(153, 153, 153, 0.09);
  border-radius: 3px;
  .title {
    width: 100%;
    height: 32px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    line-height: 34px;
    padding-left: 10px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 5px;
  }
  .kuai {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0 5%;
    .ying {
      width: 100%;
      height: 72px;
      background-image: url("../../../assets/img/蓝.png");
      .pp {
        color: #ffffff;
        margin: 5px;
      }
      .tian {
        width: 100%;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
      }
    }
    .chu {
      width: 100%;
      height: 72px;
      background-image: url("../../../assets/img/绿.png");
      .pp {
        color: #ffffff;
        margin: 5px;
      }
      .tian {
        width: 100%;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
      }
    }
    .que {
      width: 100%;
      height: 72px;
      background-image: url("../../../assets/img/橙.png");
      .pp {
        color: #ffffff;
        margin: 5px;
      }
      .tian {
        width: 100%;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
      }
    }
    .jia {
      width: 100%;
      height: 72px;
      background-image: url("../../../assets/img/粉.png");
      .pp {
        color: #ffffff;
        margin: 5px;
      }
      .tian {
        width: 100%;
        color: #ffffff;
        font-size: 18px;
        text-align: center;
      }
    }
  }
}
.bg-bottom-left {
  width: 100%;
  height: 229px;
  background: #ffffff;
  box-shadow: 0px 0px 3px 5px rgba(153, 153, 153, 0.09);
  border-radius: 3px;
  .mei-zi {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 10px;
    .back {
      background: #e9e9e9;
    }
    .meir {
      width: 100%;
      height: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 10px;
      .imgurl {
        width: 16px;
        height: 16px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .hui {
        width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.bg-bottom-moddel {
  /deep/ .el-calendar__header {
    display: none;
  }
  /deep/ .el-calendar-day {
    width: 20px;
    height: 25px;
  }
  /deep/ .el-calendar__body {
    width: 100%;
    height: 229px;
    padding: none;
  }
}
.bg-bottom-right {
  width: 100%;
  height: 229px;
  background: #ffffff;
  .wo-de {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    height: 32px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e9e9e9;
  }
  .zhi {
    width: 100%;
    height: 91px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    .zhi-img {
      width: 100%;
      height: 91px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .wen {
      width: 100%;
      height: 40px;
      font-size: 11px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-top: 10px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
}
</style>
